<template>
	<div id="dropdiv" ref="dropdiv" class="drop-menu-items" v-click-outside="onClickoutside" :class="{'drop-menu-open':show==1,'drop-menu-close':show==0,'drop-bottom':placement=='bottom' }" >			
		<template v-for="(item,index) in Array.from(menuitems)">			
			<div class="drop-menu-item" :style="'width:'+width+'px;text-align:'+textalign+';'" @click="itemclick(item,index)">
				<!--<i v-if="item.iconPosition=='before'" class="iconfont" :class="item.iconname"></i>-->
				{{item.name}}
				<!--<i v-if="item.iconPosition=='after'" class="iconfont" :class="item.iconname"></i>-->
			</div>			
		</template>		
		<div v-if="placement=='top'" class="toparrow" ref='arrow'></div>
		<div v-if="placement=='left'" class="leftarrow" ref='arrow'></div>
		<div v-if="placement=='right'" class="rightarrow" ref='arrow'></div>
		<div v-if="placement=='bottom'&&showbottom" class="bottomarrow" ref='arrow'></div>
		<div v-if="placement=='bottom'&&!showbottom" style="height: 10px;"></div>
	</div>	
</template>

<script>
	import clickOutside from "@/directives/clickoutside.js"
	export default {
		name: "dropMemu",//下拉菜单
		directives: { clickOutside },
		props: {
			width: {
				default: 98
			},			
			textalign:{default:'center'},
			height: {
				default: 40
			},				
			menuitems: null,		
			
			menuleft:{
				default:-10
			},
			arrowleft:{
				default:10
			},
			scrollTop:{default:0},
			parentitem:{default:null},			
		},
		components: {

		},
		data() {
			return {
				show: 1,
				placement:"top",
				showbottom:false,
			}
		},
		computed: {

		},
		methods: {
			itemclick(item,index) {
				this.show = 0;
				setTimeout( () => {
					this.$emit('dropitemclick',this.parentitem,item,index);
					this.$emit('close', true);
				},300);
				
			},
			mouseenter(){
				this.show =  1;
				this.$emit('show',true);
			},			
			onClickoutside(){
				if(this.show==1){
					this.show = 0;
					this.showbottom = false;
					setTimeout( () => {						
						this.$emit('close', true);
					},300);
				}				
			}
		},
		mounted() {	
			let menuHeight = this.menuitems.length * 30 + 20;			
//			console.log(this.placement);
//			console.log('屏幕高度 ：           '+document.documentElement.clientHeight);
//			console.log('起始位置top ：           '+(this.$refs.dropdiv.offsetTop - this.scrollTop));
//			console.log('下拉框高度 ：           '+ menuHeight);
			
			if(this.placement=='top'){
				//按top 显示  判断  drop 下拉是否能显示下，不能显示下，就把drop 按 bottom 显示
				if(this.$refs.dropdiv.offsetTop - this.scrollTop + menuHeight > document.documentElement.clientHeight){
					this.$refs.dropdiv.style.top = (this.$refs.dropdiv.offsetTop - this.scrollTop - menuHeight - 40) + 'px';					
					this.placement = 'bottom';	
					menuHeight = menuHeight;
					this.$refs.dropdiv.style.setProperty('--menu-height', menuHeight+'px');
					setTimeout(() => {
				        this.showbottom = true;
				    }, 299);
				}else{
					this.$refs.dropdiv.style.top = (this.$refs.dropdiv.offsetTop - this.scrollTop) + 'px';
					this.$refs.arrow.style.top = (this.$refs.dropdiv.offsetTop - 9) + 'px';
					this.$refs.dropdiv.style.setProperty('--menu-height', menuHeight+'px');
				}				
				this.$refs.dropdiv.style.left = this.$refs.dropdiv.parentNode.offsetLeft - document.documentElement.scrollLeft + this.menuleft + 'px';
				this.$refs.arrow.style.left = this.$refs.dropdiv.offsetLeft + this.arrowleft + 'px';
			}	
			
			
		}
	}
</script>

<style scoped>		
	#dropdiv{
		--menu-height:0px;
	}
	.drop-menu-items {	
		background: var(--page-back-color);
		color:var(--page-lable-text-color);			
		box-shadow:0px 10px 20px 0px var(--drop-menu-boxshadow-color), 0px -10px 20px 0px var(--drop-menu-boxshadow-color);
		font-size: 14px;
		height: 0;
		position: fixed;
		overflow: hidden;		
		z-index: 99;		
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;		
	}	
	.drop-bottom{
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;	
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}
	.drop-menu-open{
		height: auto;
		animation: menuopen 0.3s;
	}
	@keyframes menuopen {
		from {			
			height: 0;
		}
		to {			
			height: var(--menu-height);
		}
	}
	.drop-menu-close{
		height: 0;
		animation: menuclose 0.3s;
	}
	@keyframes menuclose{
		from{
			height: var(--menu-height);
		}
		to{
			height: 0;
		}
	}
	.drop-menu-item {
		line-height: 30px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		cursor: pointer;		
		padding: 0 15px;
	}
	.drop-menu-item:first-child{
		margin-top: 10px;
	}
	.drop-menu-item:nth-last-child(2){
		margin-bottom: 10px;
	}
	.drop-menu-item:hover{
		background: var(--button-hover-back-color);		
		color: var(--button-active-text-color);
		cursor: pointer;	
	}
	.drop-menu-item:active{
		background: var(--button-active-back-color);
		color: var(--button-active-text-color);
		cursor: pointer;
	}
	.iconbefore{
		margin-right: 10px;	
		color: var(--icon-color);	
	}
	.iconafter{
		margin-left: 10px;
		color: var(--icon-new-color);
	}
	.toparrow{
		position: fixed;
		border-style: solid;
	    border-width: 0px 10px 10px 10px;
	    border-color: transparent transparent var(--drop-menu-arrow-color) transparent;
	    width: 0px;
	    height: 0px;
	}
	.leftarrow{
		position: fixed;
		border-style: solid;
        border-width: 10px 10px 10px 0px;
        border-color: transparent var(--drop-menu-arrow-color) transparent transparent ;
        width: 0px;
        height: 0px;
	}
	.rightarrow{
		position: fixed;
		border-style: solid;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent var(--drop-menu-arrow-color);
        width: 0px;
        height: 0px;
	}
	.bottomarrow{
		position: fixed;
		border-style: solid;
        border-width: 10px 10px 0 10px;
        border-color: var(--drop-menu-arrow-color) transparent transparent transparent;
        width: 0px;
        height: 0px;
	}
	.editicon{
		color: var(--icon-edit-color);	
		margin-right: 13px;	
	}
	.editicon:before{
		content: "\e6d2";		
	}
	
	.delicon{
		color: var(--icon-xx-color);
		margin-right: 13px;			
	}
	.delicon:before{
		content: "\e600";		
	}
	
	.enableicon{
		color: var(--icon-save-color);	
		margin-right: 13px;		
	}
	.enableicon:before{
		content: "\e6d2";		
	}
	
	.disableicon{
		color: var(--icon-edit-color);	
		margin-right: 13px;		
	}
	.disableicon:before{
		content: "\e6d2";		
	}
</style>